@phillips/seldon 1.111.1 → 1.112.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Article/Article.d.ts +22 -0
- package/dist/components/Article/Article.js +27 -0
- package/dist/components/Article/Article.stories.d.ts +18 -0
- package/dist/components/Article/Article.test.d.ts +1 -0
- package/dist/components/Article/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +13 -11
- package/dist/node_modules/exenv/index.js +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
- package/dist/scss/componentStyles.scss +1 -0
- package/dist/scss/components/Article/_article.scss +29 -0
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ComponentProps, ElementType } from 'react';
|
|
2
|
+
import { LinkProps } from '../Link';
|
|
3
|
+
export interface ArticleProps extends ComponentProps<'div'> {
|
|
4
|
+
imageSrc?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
header?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
linkElement?: ElementType<LinkProps>;
|
|
9
|
+
linkLabel?: string;
|
|
10
|
+
linkHref?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* ## Overview
|
|
14
|
+
*
|
|
15
|
+
* Overview of this widget
|
|
16
|
+
*
|
|
17
|
+
* [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=20704-18000&p=f&m=dev)
|
|
18
|
+
*
|
|
19
|
+
* [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-article--overview)
|
|
20
|
+
*/
|
|
21
|
+
declare const Article: import('react').ForwardRefExoticComponent<Omit<ArticleProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export default Article;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsxs as c, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as u } from "react";
|
|
3
|
+
import { getCommonProps as h } from "../../utils/index.js";
|
|
4
|
+
import x from "../../node_modules/classnames/index.js";
|
|
5
|
+
import $ from "../SeldonImage/SeldonImage.js";
|
|
6
|
+
import { TextVariants as e } from "../Text/types.js";
|
|
7
|
+
import r from "../Text/Text.js";
|
|
8
|
+
import "../Link/types.js";
|
|
9
|
+
import v from "../Link/Link.js";
|
|
10
|
+
const b = u(
|
|
11
|
+
({ className: d, imageSrc: a, label: n, header: o, description: m, linkElement: f = v, linkLabel: s, linkHref: p, ...i }, _) => {
|
|
12
|
+
const { className: t, ...N } = h(i, "Article");
|
|
13
|
+
return /* @__PURE__ */ c("article", { ...N, className: x(t, d), ...i, ref: _, children: [
|
|
14
|
+
a ? /* @__PURE__ */ l($, { aspectRatio: "16/9", src: a, alt: "bull" }) : null,
|
|
15
|
+
/* @__PURE__ */ c("div", { className: `${t}__content`, children: [
|
|
16
|
+
n ? /* @__PURE__ */ l(r, { variant: e.label, className: `${t}__content-label`, children: n }) : null,
|
|
17
|
+
o ? /* @__PURE__ */ l(r, { variant: e.heading3, className: `${t}__content-title`, children: o }) : null,
|
|
18
|
+
m ? /* @__PURE__ */ l(r, { variant: e.body2, className: `${t}__content-description`, children: m }) : null,
|
|
19
|
+
s ? /* @__PURE__ */ l(f, { href: p, className: `${t}__content-link`, children: s }) : null
|
|
20
|
+
] })
|
|
21
|
+
] });
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
b.displayName = "Article";
|
|
25
|
+
export {
|
|
26
|
+
b as default
|
|
27
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ArticleProps } from './Article';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: import('react').ForwardRefExoticComponent<Omit<ArticleProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
5
|
+
};
|
|
6
|
+
export default meta;
|
|
7
|
+
export declare const Playground: {
|
|
8
|
+
(props: ArticleProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
args: {
|
|
10
|
+
imageSrc: string;
|
|
11
|
+
label: string;
|
|
12
|
+
header: string;
|
|
13
|
+
description: string;
|
|
14
|
+
linkLabel: string;
|
|
15
|
+
linkHref: string;
|
|
16
|
+
};
|
|
17
|
+
argTypes: {};
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Article, type ArticleProps } from './Article';
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PaddingTokens as f, SpacingTokens as s, defaultYear as l, emailValidation as d, encodeURLSearchParams as m, findChildrenExcludingTypes as p, findChildrenOfType as u, generatePaddingClassName as x, getCommonProps as
|
|
1
|
+
import { PaddingTokens as f, SpacingTokens as s, defaultYear as l, emailValidation as d, encodeURLSearchParams as m, findChildrenExcludingTypes as p, findChildrenOfType as u, generatePaddingClassName as x, getCommonProps as i, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
|
|
2
2
|
import { default as S } from "./assets/account_circle.svg.js";
|
|
3
3
|
import { default as L } from "./assets/arrowPrev.svg.js";
|
|
4
4
|
import { default as T } from "./assets/calendar.svg.js";
|
|
@@ -25,7 +25,7 @@ import "react";
|
|
|
25
25
|
import { default as de } from "./assets/share.svg.js";
|
|
26
26
|
import { default as pe } from "./assets/spotify.svg.js";
|
|
27
27
|
import { default as xe } from "./assets/wechat.svg.js";
|
|
28
|
-
import { default as
|
|
28
|
+
import { default as ne } from "./assets/youtube.svg.js";
|
|
29
29
|
import { default as ce } from "./assets/icon-green-circle.svg.js";
|
|
30
30
|
import { default as Se } from "./assets/icon-red-circle.svg.js";
|
|
31
31
|
import { default as Le } from "./pages/Page.js";
|
|
@@ -50,7 +50,7 @@ import { LinkVariants as ft } from "./components/Link/types.js";
|
|
|
50
50
|
import { default as lt } from "./components/LinkBlock/LinkBlock.js";
|
|
51
51
|
import { default as mt } from "./components/LinkList/LinkList.js";
|
|
52
52
|
import { default as ut } from "./components/Row/Row.js";
|
|
53
|
-
import { default as
|
|
53
|
+
import { default as it } from "./components/GridItem/GridItem.js";
|
|
54
54
|
import { GridItemAlign as gt } from "./components/GridItem/types.js";
|
|
55
55
|
import { default as Ct } from "./components/Search/Search.js";
|
|
56
56
|
import { default as ht } from "./components/Select/Select.js";
|
|
@@ -77,7 +77,7 @@ import { AuthState as mo } from "./patterns/UserManagement/types.js";
|
|
|
77
77
|
import { default as uo } from "./components/Breadcrumb/Breadcrumb.js";
|
|
78
78
|
import "react/jsx-runtime";
|
|
79
79
|
import "./node_modules/classnames/index.js";
|
|
80
|
-
import { default as
|
|
80
|
+
import { default as io } from "./components/Dropdown/Dropdown.js";
|
|
81
81
|
import { default as go } from "./components/Video/Video.js";
|
|
82
82
|
import { default as Co } from "./patterns/LanguageSelector/LanguageSelector.js";
|
|
83
83
|
import { default as ho } from "./components/ContentPeek/ContentPeek.js";
|
|
@@ -104,12 +104,13 @@ import { default as fr } from "./patterns/FilterMenu/FilterMenu.js";
|
|
|
104
104
|
import { default as lr } from "./components/Filter/Filter.js";
|
|
105
105
|
import { default as mr } from "./components/Filter/FilterInput.js";
|
|
106
106
|
import { default as ur } from "./components/Filter/FilterHeader.js";
|
|
107
|
-
import { default as
|
|
107
|
+
import { default as ir } from "./components/Countdown/Countdown.js";
|
|
108
108
|
import { CountdownVariants as gr } from "./components/Countdown/types.js";
|
|
109
109
|
import { default as Cr } from "./patterns/ObjectTile/ObjectTile.js";
|
|
110
110
|
import { default as hr } from "./patterns/BidSnapshot/BidSnapshot.js";
|
|
111
111
|
import { default as Pr } from "./patterns/BidSnapshot/BidMessage.js";
|
|
112
112
|
import { BidMessageVariants as Ir, BidStatusEnum as br } from "./patterns/BidSnapshot/types.js";
|
|
113
|
+
import { default as Ar } from "./components/Article/Article.js";
|
|
113
114
|
export {
|
|
114
115
|
$t as Accordion,
|
|
115
116
|
to as AccordionItem,
|
|
@@ -117,6 +118,7 @@ export {
|
|
|
117
118
|
ao as AccordionVariants,
|
|
118
119
|
S as AccountCircle,
|
|
119
120
|
L as ArrowPrev,
|
|
121
|
+
Ar as Article,
|
|
120
122
|
Be as AuctionStatus,
|
|
121
123
|
mo as AuthState,
|
|
122
124
|
Pr as BidMessage,
|
|
@@ -142,13 +144,13 @@ export {
|
|
|
142
144
|
Bo as CollapsibleTrigger,
|
|
143
145
|
ho as ContentPeek,
|
|
144
146
|
Po as ContentPeekHeightUnits,
|
|
145
|
-
|
|
147
|
+
ir as Countdown,
|
|
146
148
|
gr as CountdownVariants,
|
|
147
149
|
Eo as Detail,
|
|
148
150
|
Qo as DetailList,
|
|
149
151
|
jo as DetailListAlignment,
|
|
150
152
|
Ht as Drawer,
|
|
151
|
-
|
|
153
|
+
io as Dropdown,
|
|
152
154
|
Re as ErrorBoundary,
|
|
153
155
|
U as Facebook,
|
|
154
156
|
N as Favorite,
|
|
@@ -162,7 +164,7 @@ export {
|
|
|
162
164
|
q as FooterWeChat,
|
|
163
165
|
ce as GreenCircle,
|
|
164
166
|
Ee as Grid,
|
|
165
|
-
|
|
167
|
+
it as GridItem,
|
|
166
168
|
gt as GridItemAlign,
|
|
167
169
|
Qe as Header,
|
|
168
170
|
$e as HeroBanner,
|
|
@@ -225,15 +227,15 @@ export {
|
|
|
225
227
|
go as Video,
|
|
226
228
|
Ft as ViewingsList,
|
|
227
229
|
xe as WeChat,
|
|
228
|
-
|
|
230
|
+
ne as Youtube,
|
|
229
231
|
l as defaultYear,
|
|
230
232
|
d as emailValidation,
|
|
231
233
|
m as encodeURLSearchParams,
|
|
232
234
|
p as findChildrenExcludingTypes,
|
|
233
235
|
u as findChildrenOfType,
|
|
234
236
|
x as generatePaddingClassName,
|
|
235
|
-
|
|
236
|
-
|
|
237
|
+
i as getCommonProps,
|
|
238
|
+
n as noOp,
|
|
237
239
|
g as px,
|
|
238
240
|
ke as ssrMediaQueryStyle,
|
|
239
241
|
c as useNormalizedInputProps,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as e } from "../../../../_virtual/
|
|
1
|
+
import { __module as e } from "../../../../_virtual/index5.js";
|
|
2
2
|
import { __require as o } from "./cjs/react-is.production.min.js";
|
|
3
3
|
import { __require as t } from "./cjs/react-is.development.js";
|
|
4
4
|
var r;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@use '../../allPartials' as *;
|
|
2
|
+
|
|
3
|
+
.#{$px}-article {
|
|
4
|
+
border-bottom: 1px solid $pure-black;
|
|
5
|
+
border-top: 1px solid $pure-black;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: $spacing-md;
|
|
9
|
+
padding: $spacing-md;
|
|
10
|
+
|
|
11
|
+
@media (min-width: $breakpoint-md) {
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&__content {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
|
|
20
|
+
&-label,
|
|
21
|
+
&-description {
|
|
22
|
+
color: $soft-black;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-label {
|
|
26
|
+
margin-bottom: $spacing-xsm;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|