{
);
};
-ButtonStory.defaultProps = { className: null };
const PrimaryExample = (props: any) => (
@@ -487,20 +488,81 @@ const AnchorTagsExample = () => (
);
-export {
- PrimaryExample,
- PrimaryOnDarkExample,
- PrimaryOnLightExample,
- SecondaryExample,
- SecondaryOnDarkExample,
- DestructiveExample,
- FeaturedExample,
- LinkExample,
- LinkOnDarkExample,
- LinksExamples,
- MixedExample,
- AnchorTagsExample,
- FullWidthExample,
- SubmitButtonExample,
- ThemedBorderRadiusExample,
+const meta = {
+ title: 'bpk-component-button',
+ component: BpkButton,
+} satisfies Meta;
+
+export default meta;
+
+
+export const BpkButtonPrimary = {
+ render: () =>
,
+};
+
+export const BpkButtonPrimaryOnDark = {
+ render: () =>
,
+};
+
+export const BpkButtonPrimaryOnLight = {
+ render: () =>
,
+};
+
+export const BpkButtonSecondary = {
+ render: () =>
,
+};
+
+export const BpkButtonSecondaryOnDark = {
+ render: () =>
,
+};
+
+export const BpkButtonDestructive = {
+ render: () =>
,
+};
+
+export const BpkButtonFeatured = {
+ render: () =>
,
+};
+
+export const BpkButtonLinkButton = {
+ render: () =>
,
+};
+
+export const BpkButtonLinkOnDarkButton = {
+ render: () =>
,
+};
+
+export const BpkButtonLinks = {
+ render: () =>
,
+};
+
+export const Mixture = {
+ render: () =>
,
+};
+
+export const AnchorTags = {
+ render: () =>
,
+};
+
+export const VisualTest = {
+ render: () =>
,
+};
+
+export const VisualTestWithZoom = {
+ render: () =>
,
+ args: {
+ zoomEnabled: true,
+ },
+};
+
+export const SubmitButton = {
+ render: () =>
,
+};
+
+export const FullWidth = {
+ render: () =>
,
+};
+
+export const ThemedCornerRadius = {
+ render: () =>
,
};
diff --git a/examples/bpk-component-card/examples.module.scss b/packages/bpk-component-card/src/BpkCard.stories.module.scss
similarity index 95%
rename from examples/bpk-component-card/examples.module.scss
rename to packages/bpk-component-card/src/BpkCard.stories.module.scss
index 358bbe621f..edb9b3856b 100644
--- a/examples/bpk-component-card/examples.module.scss
+++ b/packages/bpk-component-card/src/BpkCard.stories.module.scss
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-@use '../../packages/bpk-mixins/tokens';
+@use '../../bpk-mixins/tokens';
.bpk-card-examples {
&__header {
diff --git a/packages/bpk-component-card/src/BpkCard.stories.tsx b/packages/bpk-component-card/src/BpkCard.stories.tsx
new file mode 100644
index 0000000000..a592f16fb3
--- /dev/null
+++ b/packages/bpk-component-card/src/BpkCard.stories.tsx
@@ -0,0 +1,302 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Fragment } from 'react';
+
+
+import {
+ coreAccentDay,
+ surfaceHighlightDay,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkCard from './BpkCard';
+import BpkCardWrapper from './BpkCardWrapper';
+import BpkDividedCard, { ORIENTATION } from './BpkDividedCard';
+
+import type { Meta } from '@storybook/react';
+
+import STYLES from './BpkCard.stories.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const shortContent = 'Book your next trip on skyscanner.net.';
+const longMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sagittis purus, id
+blandit ipsum. Pellentesque nec diam nec erat condimentum dapibus. Nunc diam augue, egestas id egestas ut, facilisis
+nec mi. Donec et congue odio, nec laoreet est. Integer rhoncus varius arcu, a fringilla libero laoreet at. Mauris
+porta varius ullamcorper. Sed laoreet libero mauris, non pretium lectus accumsan et. Suspendisse vehicula ullamcorper
+sapien, et dapibus mi aliquet non. Pellentesque auctor sagittis lectus vitae rhoncus. Fusce id enim porttitor, mattis
+ante in, vestibulum nulla.`;
+
+const headerContent = (
+
+
+ Wrapper title
+
+
+);
+
+const longContent = (
+
+
+ Let's explore
+
+
+ It's your world and we'll help you explore it. Find the best
+ prices across millions of flights, hotels and car hire options to create
+ your perfect trip.
+
+
+
+);
+
+const meta = {
+ title: 'bpk-component-card',
+ component: BpkCard,
+ subcomponents: {
+ BpkDividedCard,
+ BpkCardWrapper,
+ },
+} satisfies Meta;
+
+export default meta;
+
+
+export const Default = {
+ render: () => (
+
window.open('https://www.skyscanner.net/')}>
+ {shortContent}
+
+ ),
+};
+
+export const WithHref = {
+ render: () => (
+
{shortContent}
+ ),
+};
+
+export const WithoutPadding = {
+ render: () => (
+
window.open('https://www.skyscanner.net/')}
+ >
+ {shortContent}
+
+ ),
+};
+
+export const NonAtomic = {
+ render: () => (
+
window.open('https://www.skyscanner.net/')}
+ >
+ {longContent}
+
+ ),
+};
+
+export const NonAtomicWithHref = {
+ render: () => (
+
+ {longContent}
+
+ ),
+};
+
+export const DefaultDividedCard = {
+ render: () => (
+
+ ),
+};
+
+export const VerticalDividedCard = {
+ render: () => (
+
+ ),
+};
+
+export const WithHrefDividedCard = {
+ render: () => (
+
+ ),
+};
+
+export const NonElevatedDividedCard = {
+ render: () => (
+
+ ),
+};
+
+export const CardWrapper = {
+ render: () => (
+
window.open('https://www.skyscanner.net/')}
+ >
+ {longContent}
+
+ }
+ header={headerContent}
+ />
+ ),
+};
+
+export const DividedCardWrapper = {
+ render: () => (
+
+ }
+ header={headerContent}
+ />
+ ),
+};
+
+export const WithClassNameWrapper = {
+ render: () => (
+ window.open('https://www.skyscanner.net/')}
+ >
+ {longContent}
+
+ }
+ header={headerContent}
+ // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+ className={getClassName('bpk-card-examples__wrapper')}
+ />
+ ),
+};
+
+export const VisualTest = {
+ render: () => (
+
+ window.open('https://www.skyscanner.net/')}>
+ {shortContent}
+
+
+ window.open('https://www.skyscanner.net/')}
+ >
+ {shortContent}
+
+
+
+
+
+
+
+
+ window.open('https://www.skyscanner.net/')}
+ >
+ {longContent}
+
+ }
+ header={headerContent}
+ />
+
+
+ }
+ header={headerContent}
+ />
+
+ window.open('https://www.skyscanner.net/')}
+ >
+ {longContent}
+
+ }
+ header={headerContent}
+ // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+ className={getClassName('bpk-card-examples__wrapper')}
+ />
+
+ ),
+};
+
+export const VisualTestWithZoom = {
+ ...VisualTest,
+ args: {
+ zoomEnabled: true,
+ },
+};
diff --git a/scripts/scss/styles-prod.js b/scripts/scss/styles-prod.js
index 736fa099a2..096423ac7e 100644
--- a/scripts/scss/styles-prod.js
+++ b/scripts/scss/styles-prod.js
@@ -26,7 +26,9 @@ const files = new Glob(DIR_GLOB, {});
try {
for (const file of files) {
- compile(file);
+ if (!file.includes('.stories.')) {
+ compile(file);
+ }
}
} catch (err) {
// eslint-disable-next-line no-console