Skip to content

Commit

Permalink
feat(blade): rebranding whitelabel fix (#1959)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anuraghazra
anuraghazra authored Jan 16, 2024
1 parent 40dd304 commit 856f56d
Show file tree
Hide file tree
Showing 57 changed files with 848 additions and 1,347 deletions.
48 changes: 24 additions & 24 deletions packages/blade/.storybook/react/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,30 +226,30 @@ export const globalTypes = {
},
},
// TODO: Rebranding - Uncomment this when we fix white-labeling
// brandColor: {
// name: 'Brand Color',
// description: 'Brand Color (You can pass any valid color to BladeProvider)',
// defaultValue: undefined,
// toolbar: {
// icon: 'contrast',
// // Array of plain string values or MenuItem shape (see below)
// items: [
// { value: undefined, title: 'Razorpay' },
// { value: '#EE681A', title: 'ICICI' },
// { value: '#83003D', title: 'Axis' },
// { value: '#15A5EB', title: 'SBI' },
// { value: '#107259', title: 'IDBI' },
// { value: '#FFF10A', title: 'Allahabad' },
// { value: '#F32951', title: 'BookMyShow' },
// { value: '#F86B15', title: 'Swiggy' },
// { value: '#CF2033', title: 'Zomato' },
// { value: '#19BEA2', title: 'DSP Mutual Fund' },
// { value: '#DF005D', title: 'Nykaa' },
// ],
// // Property that specifies if the name of the item will be displayed
// showName: true,
// },
// },
brandColor: {
name: 'Brand Color',
description: 'Brand Color (You can pass any valid color to BladeProvider)',
defaultValue: undefined,
toolbar: {
icon: 'paintbrush',
// Array of plain string values or MenuItem shape (see below)
items: [
{ value: undefined, title: 'Razorpay' },
{ value: '#EE681A', title: 'ICICI' },
{ value: '#83003D', title: 'Axis' },
{ value: '#15A5EB', title: 'SBI' },
{ value: '#107259', title: 'IDBI' },
{ value: '#FFF10A', title: 'Allahabad' },
{ value: '#F32951', title: 'BookMyShow' },
{ value: '#F86B15', title: 'Swiggy' },
{ value: '#CF2033', title: 'Zomato' },
{ value: '#19BEA2', title: 'DSP Mutual Fund' },
{ value: '#DF005D', title: 'Nykaa' },
],
// Property that specifies if the name of the item will be displayed
showName: true,
},
},
};

export const globals = {
Expand Down
0 ...docs/guides/CreateTheme.disabledstory.mdx → ...blade/docs/guides/CreateTheme.stories.mdx
View file
File renamed without changes.
0 .../guides/ThemePlayground.disabledstory.mdx → ...e/docs/guides/ThemePlayground.stories.mdx
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions packages/blade/src/components/Accordion/StyledAccordionButton.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
getTransitionEasing,
} from './commonStyles';
import { castWebType } from '~utils';
import { getFocusRingStyles } from '~utils/getFocusRingStyles';

const StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props) => {
const { theme, isExpanded } = props;
Expand All @@ -28,8 +29,7 @@ const StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props)
color: theme.colors.interactive.icon.gray.subtle,
},
'&:focus-visible': {
outline: 'none',
boxShadow: `0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`,
...getFocusRingStyles(theme),
// only need border radius on the focus ring
borderRadius: theme.border.radius.small,
},
Expand Down
12 changes: 9 additions & 3 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 juyCWj"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 juyCWj"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 juyCWj"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;
exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;

exports[`<Accordion /> should render Accordion on server 2`] = `
.c3.c3.c3.c3.c3 {
Expand Down Expand Up @@ -41,8 +41,14 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
}
.c3.c3.c3.c3.c3:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
outline: 4px solid hsla(227,100%,59%,0.18);
outline-offset: 1px;
-webkit-transition-property: outline-width;
transition-property: outline-width;
-webkit-transition-duration: 70ms;
transition-duration: 70ms;
-webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
transition-timing-function: cubic-bezier(0.3,0,0.2,1);
border-radius: 2px;
}
Expand Down
10 changes: 8 additions & 2 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,14 @@ exports[`<Accordion /> should render 1`] = `
}
.c3.c3.c3.c3.c3:focus-visible {
outline: none;
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
outline: 4px solid hsla(227,100%,59%,0.18);
outline-offset: 1px;
-webkit-transition-property: outline-width;
transition-property: outline-width;
-webkit-transition-duration: 70ms;
transition-duration: 70ms;
-webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
transition-timing-function: cubic-bezier(0.3,0,0.2,1);
border-radius: 2px;
}
Expand Down
Loading

0 comments on commit 856f56d

Please sign in to comment.