@times-design-system/components-react 0.1.0

package/dist/typographyStyles.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: 'Roboto', 'Roboto-Regular', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare const cn: (...classNames: (string | undefined)[]) => string;

package/dist/utils/hooks.d.ts

@@ -0,0 +1,8 @@
+type UseTypographyToken = (typographyToken: string, tokens: {
+    breakpoints: {
+        [key: string]: number;
+    };
+    [key: string]: any;
+}) => string;
+export declare const useTypographyToken: UseTypographyToken;
+export {};

package/lib/wordpress.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = wordpress;
+
+function wordpress() {
+  return 'Hello from wordpress';
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@times-design-system/components-react",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Times Design System components",
+  "keywords": [],
+  "author": "douglasmik <michael@viaverso.co.uk>",
+  "license": "ISC",
+  "main": "dist/index",
+  "dev": "src/index",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/newsuk/times-design-system.git"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:rollup",
+    "build:rollup": "rollup -c",
+    "clean": "rimraf dist",
+    "dev": "rollup -c --watch",
+    "prepublishOnly": "npm run build",
+    "test": "node ./__tests__/*.test.js"
+  },
+  "bugs": {
+    "url": "https://github.com/newsuk/times-design-system/issues"
+  },
+  "homepage": "https://github.com/newsuk/times-design-system#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
+    "@types/react": "19.2.5",
+    "postcss": "^8.4.31",
+    "typescript": "^5.0.0"
+  },
+  "gitHead": "f7917d08adf531af85f6a0b0df2d137052a62de0"
+}

package/rollup.config.js

@@ -0,0 +1,58 @@
+import babel from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'es',
+      sourcemap: true
+    },
+    {
+      file: 'dist/index.cjs.js',
+      format: 'cjs',
+      sourcemap: true
+    }
+  ],
+  plugins: [
+    resolve({
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    }),
+    commonjs(),
+    json(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: 'dist'
+    }),
+    postcss({
+      extract: false, // Inject CSS into JS
+      inject: true, // Inject CSS into the head
+      minimize: true,
+      sourceMap: true,
+      modules: {
+        generateScopedName: '[name]__[local]___[hash:base64:5]'
+      },
+      use: {
+        sass: {
+          data: `@import "src/styles/variables.scss";` // Global SCSS variables
+        }
+      }
+    }),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    }),
+    copy({
+      targets: [{ src: 'src/**/*.css', dest: 'dist', flatten: false }]
+    })
+  ],
+  external: ['react', 'react-dom'] // Don't bundle React
+};

package/src/AdContainer/AdContainer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text } from '../Text/Text';
+import './styles.css';
+
+interface AdContainerProps {
+  type?: 'header' | 'inline';
+  slotID?: string;
+}
+
+/** Primary AdContainer UI component for user interaction */
+
+export const AdContainer: React.FC<AdContainerProps> = ({
+  type = 'inline',
+  slotID
+}) => {
+  return (
+    <div
+      className={`ad-${type}-container`}
+      data-testid={`ad-${type}-container`}
+    >
+      {type === 'inline' && (
+        <Text as="span" classes="ad-label">
+          Advertisement
+        </Text>
+      )}
+      <div className={`ad-${type}-wrapper`}>
+        <div id={type === 'header' ? 'ad-header' : slotID}></div>
+      </div>
+    </div>
+  );
+};

package/src/AdContainer/styles.css

@@ -0,0 +1,58 @@
+.ad-inline-container {
+  clear: both;
+  width: 100%;
+  min-height: 283px;
+  margin: 30px 0;
+  box-sizing: content-box;
+  padding: 0 0 10px;
+  border-bottom: 1px solid rgb(78, 78, 78);
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .ad-inline-container {
+    min-height: 123px;
+  }
+}
+
+.ad-inline-container .ad-label {
+  border-bottom: 1px solid rgb(78, 78, 78);
+  color: rgb(204, 204, 204);
+  flex: 1 1 100%;
+  font: 14px/17px "TimesDigitalW04-Regular", "TimesDigitalW04-Regular-fallback", serif;
+  letter-spacing: 0.6px;
+  margin: 0 0 10px;
+  padding: 0 0 5px;
+  text-align: center;
+  text-transform: uppercase;
+  display: block;
+}
+
+.ad-header {
+  display: flex;
+  padding-block: 10px 10px;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  max-width: 100%;
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: var(--wp--preset--color--grey, #dbdbdb);
+  flex-direction: column;
+}
+.ad-header-wrapper {
+  min-height: 50px;
+  align-items: center;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 0;
+}
+@media (min-width: 768px) {
+  .ad-header-wrapper {
+    min-height: 90px;
+  }
+}
+@media (min-width: 1024px) {
+  .ad-header-wrapper {
+    min-height: 250px;
+  }
+}

package/src/Article/ArticleMetaContainer/ArticleMetaContainer.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import './styles.css';
+
+interface ArticleMetaProps {
+  children?: React.ReactNode;
+}
+
+/** Primary ArticleMeta UI component for user interaction */
+
+export const ArticleMetaContainer: React.FC<ArticleMetaProps> = ({
+  children
+}) => {
+  return <div className="article-meta-container">{children}</div>;
+};

package/src/Article/ArticleMetaContainer/styles.css

@@ -0,0 +1,151 @@
+.video-article-container .video-article-up-next {
+  width: 100%;
+  background-color: rgb(29, 29, 27);
+  position: relative;
+}
+.video-article-container .video-article-up-next * {
+  width: 100%;
+}
+@media (min-width: 1024px) {
+  .video-article-container .video-article-up-next {
+    background-color: unset;
+    flex-shrink: 0;
+    width: 220px;
+    order: 0;
+  }
+}
+@media (min-width: 1320px) {
+  .video-article-container .video-article-up-next {
+    width: 270px;
+  }
+}
+.video-article-container .video-article-up-next .vertical-divider {
+  display: none;
+}
+@media (min-width: 768px) {
+  .video-article-container .video-article-up-next .vertical-divider {
+    position: absolute;
+    display: block;
+    height: 100%;
+    width: 1px;
+    background-color: #222;
+    margin: 0 32px;
+    left: -48px;
+  }
+}
+
+.up-next-articles-container {
+  padding: 20px;
+  position: relative;
+}
+@media (min-width: 768px) {
+  .up-next-articles-container {
+    padding: 24px;
+  }
+}
+@media (min-width: 1024px) {
+  .up-next-articles-container {
+    padding: 0;
+  }
+}
+.up-next-articles-container .up-next-article-image {
+  padding-bottom: 56.25%;
+  position: relative;
+  overflow: hidden;
+  background-color: #333;
+}
+.up-next-articles-container .up-next-article-image picture {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.up-next-articles-container .up-next-article-image img {
+  max-width: 100%;
+}
+.up-next-articles-container .up-next-articles-overlay {
+  display: none;
+}
+@media (max-width: 1023px) {
+  .up-next-articles-container .up-next-articles-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 75px;
+    z-index: 1;
+  }
+}
+.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-left {
+  left: 0;
+  background-image: linear-gradient(to right, rgb(29, 29, 27), transparent);
+}
+.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-right {
+  right: 0;
+  background-image: linear-gradient(to left, rgb(29, 29, 27), transparent);
+}
+.up-next-articles-container.show-left-overlay .up-next-articles-overlay-left, .up-next-articles-container.show-right-overlay .up-next-articles-overlay-right {
+  display: flex;
+}
+.up-next-articles-container .up-next-articles-scroll {
+  overflow-x: auto;
+  position: relative;
+  scrollbar-width: none;
+}
+.up-next-articles-container .up-next-articles {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(156px, 1fr));
+  -moz-column-gap: 24px;
+       column-gap: 24px;
+}
+@media (min-width: 1024px) {
+  .up-next-articles-container .up-next-articles {
+    gap: 24px 0;
+    grid-template-columns: 1fr;
+  }
+}
+.up-next-articles-container .up-next-articles .up-next-article {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+}
+.up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  background-color: #222;
+  z-index: 1;
+  height: 100%;
+  width: 1px;
+  right: -12px;
+}
+@media (min-width: 1024px) {
+  .up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
+    height: 1px;
+    width: 100%;
+    left: 0;
+    bottom: -12px;
+  }
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container {
+  position: relative;
+  margin-bottom: 12px;
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-duration {
+  z-index: 2;
+  bottom: 0;
+  left: 10px;
+  position: absolute;
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-overlay {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  z-index: 1;
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-container:hover .up-next-article-image-overlay {
+  opacity: 1;
+}

package/src/Article/UpNextArticles/UpNextArticles.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text } from '../../Text/Text';
+import './styles.css';
+
+interface UpNextArticlesProps {
+  upNextArticles: {
+    url: string;
+    headline: string;
+    duration?: string;
+    thumbnail: string;
+  }[];
+}
+
+/** Primary UpNextArticles UI component for user interaction */
+
+export const UpNextArticles: React.FC<UpNextArticlesProps> = ({
+  upNextArticles
+}) => {
+  if (!upNextArticles || upNextArticles.length === 0) {
+    return;
+  }
+
+  return (
+    <div className="video-article-up-next">
+      <div className="vertical-divider"></div>
+      <div className="up-next-articles-container show-right-overlay">
+        <Text as="h4" classes="video-heading video-category">
+          Up Next
+        </Text>
+        <div className="up-next-articles-overlay up-next-articles-overlay-left"></div>
+        <div className="up-next-articles-scroll">
+          <div className="up-next-articles">
+            {upNextArticles.map((up_next_article, index) => (
+              <div className="up-next-article" key={index}>
+                <a href={up_next_article.url}>
+                  <div className="up-next-article-image-container">
+                    <Text classes="up-next-article-duration video-heading">
+                      {up_next_article.duration}
+                    </Text>
+                    <div className="up-next-article-image-overlay"></div>
+                    <div className="up-next-article-image">
+                      {up_next_article.thumbnail !== '' && (
+                        <picture>
+                          <source
+                            srcSet={up_next_article.thumbnail}
+                            type="image/webp"
+                          />
+                          <img
+                            loading="lazy"
+                            src={up_next_article.thumbnail}
+                            alt={up_next_article.headline}
+                          />
+                        </picture>
+                      )}
+                    </div>
+                  </div>
+                  <Text as="span" classes="article-heading">
+                    {up_next_article.headline}
+                  </Text>
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="up-next-articles-overlay up-next-articles-overlay-right"></div>
+      </div>
+    </div>
+  );
+};

package/src/Article/UpNextArticles/styles.css

@@ -0,0 +1,151 @@
+.video-article-container .video-article-up-next {
+  width: 100%;
+  background-color: rgb(29, 29, 27);
+  position: relative;
+}
+.video-article-container .video-article-up-next * {
+  width: 100%;
+}
+@media (min-width: 1024px) {
+  .video-article-container .video-article-up-next {
+    background-color: unset;
+    flex-shrink: 0;
+    width: 220px;
+    order: 0;
+  }
+}
+@media (min-width: 1320px) {
+  .video-article-container .video-article-up-next {
+    width: 270px;
+  }
+}
+.video-article-container .video-article-up-next .vertical-divider {
+  display: none;
+}
+@media (min-width: 768px) {
+  .video-article-container .video-article-up-next .vertical-divider {
+    position: absolute;
+    display: block;
+    height: 100%;
+    width: 1px;
+    background-color: #222;
+    margin: 0 32px;
+    left: -48px;
+  }
+}
+
+.up-next-articles-container {
+  padding: 20px;
+  position: relative;
+}
+@media (min-width: 768px) {
+  .up-next-articles-container {
+    padding: 24px;
+  }
+}
+@media (min-width: 1024px) {
+  .up-next-articles-container {
+    padding: 0;
+  }
+}
+.up-next-articles-container .up-next-article-image {
+  padding-bottom: 56.25%;
+  position: relative;
+  overflow: hidden;
+  background-color: #333;
+}
+.up-next-articles-container .up-next-article-image picture {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.up-next-articles-container .up-next-article-image img {
+  max-width: 100%;
+}
+.up-next-articles-container .up-next-articles-overlay {
+  display: none;
+}
+@media (max-width: 1023px) {
+  .up-next-articles-container .up-next-articles-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 75px;
+    z-index: 1;
+  }
+}
+.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-left {
+  left: 0;
+  background-image: linear-gradient(to right, rgb(29, 29, 27), transparent);
+}
+.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-right {
+  right: 0;
+  background-image: linear-gradient(to left, rgb(29, 29, 27), transparent);
+}
+.up-next-articles-container.show-left-overlay .up-next-articles-overlay-left, .up-next-articles-container.show-right-overlay .up-next-articles-overlay-right {
+  display: flex;
+}
+.up-next-articles-container .up-next-articles-scroll {
+  overflow-x: auto;
+  position: relative;
+  scrollbar-width: none;
+}
+.up-next-articles-container .up-next-articles {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(156px, 1fr));
+  -moz-column-gap: 24px;
+       column-gap: 24px;
+}
+@media (min-width: 1024px) {
+  .up-next-articles-container .up-next-articles {
+    gap: 24px 0;
+    grid-template-columns: 1fr;
+  }
+}
+.up-next-articles-container .up-next-articles .up-next-article {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+}
+.up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  background-color: #222;
+  z-index: 1;
+  height: 100%;
+  width: 1px;
+  right: -12px;
+}
+@media (min-width: 1024px) {
+  .up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
+    height: 1px;
+    width: 100%;
+    left: 0;
+    bottom: -12px;
+  }
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container {
+  position: relative;
+  margin-bottom: 12px;
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-duration {
+  z-index: 2;
+  bottom: 0;
+  left: 10px;
+  position: absolute;
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-overlay {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  z-index: 1;
+}
+.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-container:hover .up-next-article-image-overlay {
+  opacity: 1;
+}

package/src/Button/Button.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './styles.css';
+
+interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button: React.FC<ButtonProps> = ({
+  primary,
+  size,
+  label,
+  ...props
+}) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

package/src/Button/styles.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}