@ndla/ui 56.0.15-alpha.0 → 56.0.16-alpha.0

package/es/locale/messages-se.js

@@ -1068,9 +1068,9 @@ const messages = {
         },
         fetchMore: "Hent flere svar",
         deleted: "Dette innlegget er slettet av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv et svar til {{ name }}"
       },
       flag: {

package/es/locale/messages-sma.js

@@ -1068,9 +1068,9 @@ const messages = {
         },
         fetchMore: "Hent flere svar",
         deleted: "Dette innlegget er slettet av forfatteren.",
-        upvote: "Stem opp",
+        upvote: "Liker",
         numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
-        removeUpvote: "Fjern stemme",
+        removeUpvote: "Slutt å like",
         reply: "Skriv et svar til {{ name }}"
       },
       flag: {

package/es/styles.css

@@ -85,34 +85,26 @@
 }
 }
 
-  .px_8\% {
-    padding-inline: 8%;
-}
-
-  .w_100\% {
-    width: 100%;
-}
-
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .pbe_xsmall {
-    padding-block-end: var(--spacing-xsmall);
-}
-
-  .bg_surface\.default {
-    background: var(--colors-surface-default);
+  .bg_background\.default {
+    background: var(--colors-background-default);
 }
 
   .d_flex {
     display: flex;
 }
 
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
   .c_text\.default {
     color: var(--colors-text-default);
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
   .ov-wrap_break-word {
     overflow-wrap: break-word;
 }
@@ -121,26 +113,22 @@
     position: relative;
 }
 
-  .gap_xsmall {
-    gap: var(--spacing-xsmall);
-}
-
-  .pos_absolute {
-    position: absolute;
-}
-
   .gap_medium {
     gap: var(--spacing-medium);
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
 }
 
   .mbs_medium {
     margin-block-start: var(--spacing-medium);
 }
 
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
+}
+
   .bd-t_1px_solid {
     border-top: 1px solid;
 }
@@ -153,8 +141,8 @@
     padding-block: var(--spacing-xsmall);
 }
 
-  .pbs_xxlarge {
-    padding-block-start: var(--spacing-xxlarge);
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
 }
 
   .li-s_none {
@@ -218,10 +206,6 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .bg_background\.default {
-    background: var(--colors-background-default);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -374,6 +358,10 @@
     padding: var(--spacing-medium);
 }
 
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
+}
+
   .z_base {
     z-index: var(--z-index-base);
 }
@@ -426,6 +414,10 @@
     border: 2px solid;
 }
 
+  .pos_absolute {
+    position: absolute;
+}
+
   .op_0 {
     opacity: 0;
 }
@@ -635,14 +627,6 @@
     align-items: flex-start;
 }
 
-  .right_8\% {
-    right: 8%;
-}
-
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
   .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
@@ -694,6 +678,10 @@
     align-items: flex-end;
 }
 
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
+}
+
   .as_center {
     align-self: center;
 }
@@ -734,10 +722,6 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
-}
-
   .bg-c_surface\.disabled {
     background-color: var(--colors-surface-disabled);
 }
@@ -773,6 +757,10 @@
     transition-timing-function: ease-out;
 }
 
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
   .right_xsmall {
     right: var(--spacing-xsmall);
 }
@@ -908,6 +896,10 @@
     overflow-wrap: anywhere;
 }
 
+  .\[\&_\>_\:is\(\:last-child\)\]\:pbe_5xlarge > :is(:last-child) {
+    padding-block-end: var(--spacing-5xlarge);
+}
+
   .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
     text-align: center;
 }
@@ -1456,6 +1448,9 @@
 }
 
   @media screen and (min-width: 29.75rem) {
+    .mobileWide\:h_340px {
+      height: 340px;
+}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1468,12 +1463,6 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:pbs_medium {
-      padding-block-start: var(--spacing-medium);
-}
-    .tablet\:pbe_medium {
-      padding-block-end: var(--spacing-medium);
-}
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
 }
@@ -1488,9 +1477,6 @@
 }
     .tablet\:w_83\.333\% {
       width: 83.333%;
-}
-    .tablet\:top_medium {
-      top: var(--spacing-medium);
 }
     .tablet\:ai_unset {
       align-items: unset;
@@ -1557,6 +1543,27 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
+}
+    .tabletWide\:w_auto {
+      width: auto;
+}
+    .tabletWide\:d_block {
+      display: block;
+}
+    .tabletWide\:ov_hidden {
+      overflow: hidden;
+}
+    .tabletWide\:pos_relative {
+      position: relative;
+}
+    .tabletWide\:lc_4 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+}
+    .tabletWide\:box-orient_vertical {
+      box-orient: vertical;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -1567,23 +1574,11 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
-    .desktop\:pbs_xxlarge {
-      padding-block-start: var(--spacing-xxlarge);
-}
-    .desktop\:pbe_xxlarge {
-      padding-block-end: var(--spacing-xxlarge);
-}
     .desktop\:w_260px {
       width: 260px;
 }
     .desktop\:h_260px {
       height: 260px;
-}
-    .desktop\:h_340px {
-      height: 340px;
-}
-    .desktop\:top_xxlarge {
-      top: var(--spacing-xxlarge);
 }
     .desktop\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(3, minmax(0, 1fr));

package/lib/Article/Article.d.ts

@@ -8,17 +8,9 @@
 import { ReactNode } from "react";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
-export declare const ArticlePadding: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {
-    padStart?: boolean | undefined;
-    padEnd?: boolean | undefined;
-}>;
 export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & {
-    padded?: boolean | undefined;
-} & import("react").RefAttributes<HTMLElement>>;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
 export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
 } & {
@@ -27,19 +19,12 @@ export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<O
 export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
 } & import("@ark-ui/react").PolymorphicProps>, {}>;
-export declare const ArticleActionWrapper: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {
-    padded?: boolean | undefined;
-}>;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {
-    padded?: boolean | undefined;
-}>;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;
 interface ArticleTitleProps {
     heartButton?: ReactNode;
     contentType?: ContentType;

package/lib/Article/Article.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticleWrapper = exports.ArticleTitle = exports.ArticlePadding = exports.ArticleHeader = exports.ArticleHGroup = exports.ArticleFooter = exports.ArticleContent = exports.ArticleActionWrapper = exports.Article = void 0;
+exports.ArticleWrapper = exports.ArticleTitle = exports.ArticleHeader = exports.ArticleHGroup = exports.ArticleFooter = exports.ArticleContent = exports.Article = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
@@ -20,57 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const articlePadding = {
-  paddingInline: "8%"
-};
-const paddingBlockEnd = {
-  paddingBlockEnd: "xsmall",
-  tablet: {
-    paddingBlockEnd: "medium"
-  },
-  desktop: {
-    paddingBlockEnd: "xxlarge"
-  }
-};
-const paddingBlockStart = {
-  paddingBlockStart: "xsmall",
-  tablet: {
-    paddingBlockStart: "medium"
-  },
-  desktop: {
-    paddingBlockStart: "xxlarge"
-  }
-};
-const ArticlePadding = exports.ArticlePadding = (0, _jsx2.styled)(_react2.ark.div, {
-  base: {
-    ...articlePadding,
-    width: "100%"
-  },
-  variants: {
-    padStart: {
-      true: paddingBlockStart
-    },
-    padEnd: {
-      true: paddingBlockEnd
-    }
-  }
-}, {
-  baseComponent: true
-});
-const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {
-  base: {
-    background: "surface.default"
-  },
-  variants: {
-    padded: {
-      true: {
-        ...articlePadding,
-        ...paddingBlockStart,
-        ...paddingBlockEnd
-      }
-    }
-  }
-}, {
+const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {}, {
   baseComponent: true
 });
 const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -86,8 +36,10 @@ const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardR
 });
 const StyledArticleWrapper = (0, _jsx2.styled)(_react2.ark.article, {
   base: {
+    background: "background.default",
     display: "flex",
     flexDirection: "column",
+    gap: "xxlarge",
     color: "text.default",
     alignItems: "center",
     width: "100%",
@@ -116,7 +68,6 @@ const ArticleHGroup = exports.ArticleHGroup = (0, _jsx2.styled)(_react2.ark.hgro
     width: "100%",
     flexDirection: "column",
     alignItems: "flex-start",
-    gap: "xsmall",
     "& h1": {
       overflowWrap: "anywhere"
     }
@@ -124,37 +75,14 @@ const ArticleHGroup = exports.ArticleHGroup = (0, _jsx2.styled)(_react2.ark.hgro
 }, {
   baseComponent: true
 });
-const ArticleActionWrapper = exports.ArticleActionWrapper = (0, _jsx2.styled)(_react2.ark.div, {
-  base: {
-    position: "absolute",
-    right: "8%",
-    top: "xsmall",
-    tablet: {
-      top: "medium"
-    },
-    desktop: {
-      top: "xxlarge"
-    }
-  }
-}, {
-  baseComponent: true
-});
 const ArticleHeader = exports.ArticleHeader = (0, _jsx2.styled)(_react2.ark.header, {
   base: {
     display: "flex",
     flexDirection: "column",
-    background: "surface.default",
     gap: "medium",
     alignItems: "flex-start",
-    width: "100%"
-  },
-  variants: {
-    padded: {
-      true: {
-        ...articlePadding,
-        ...paddingBlockStart
-      }
-    }
+    width: "100%",
+    paddingBlockStart: "xxlarge"
   }
 }, {
   baseComponent: true
@@ -163,21 +91,20 @@ const ArticleFooter = exports.ArticleFooter = (0, _jsx2.styled)(_react2.ark.foot
   base: {
     display: "flex",
     flexDirection: "column",
-    background: "surface.default",
     gap: "xxlarge",
-    width: "100%"
-  },
-  variants: {
-    padded: {
-      true: {
-        ...articlePadding,
-        ...paddingBlockEnd
-      }
+    width: "100%",
+    "& > :is(:last-child)": {
+      paddingBlockEnd: "5xlarge"
     }
   }
 }, {
   baseComponent: true
 });
+const StyledStack = (0, _jsx2.styled)(_jsx2.Stack, {
+  base: {
+    width: "100%"
+  }
+});
 const ArticleTitle = _ref2 => {
   let {
     contentType,
@@ -189,12 +116,15 @@ const ArticleTitle = _ref2 => {
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
-    padded: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHGroup, {
-      children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
-        contentType: contentType
-      }), !!heartButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleActionWrapper, {
-        children: heartButton
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledStack, {
+        justify: "space-between",
+        align: "center",
+        direction: "row",
+        gap: "small",
+        children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
+          contentType: contentType
+        }), heartButton]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         textStyle: "heading.large",
         id: id,
@@ -243,10 +173,8 @@ const Article = _ref3 => {
       competenceGoals: competenceGoals,
       lang: lang
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
-      padded: true,
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {
-      padded: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleByline.ArticleByline, {
         footnotes: footNotes,
         authors: authors,

package/lib/Article/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleActionWrapper, ArticleHGroup, ArticleContent, ArticlePadding, } from "./Article";
+export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleHGroup, ArticleContent, } from "./Article";
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
 export { ArticleFootNotes } from "./ArticleFootNotes";
 export { ArticleParagraph } from "./ArticleParagraph";

package/lib/Article/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "Article", {
     return _Article.Article;
   }
 });
-Object.defineProperty(exports, "ArticleActionWrapper", {
-  enumerable: true,
-  get: function () {
-    return _Article.ArticleActionWrapper;
-  }
-});
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
   get: function () {
@@ -57,12 +51,6 @@ Object.defineProperty(exports, "ArticleHeader", {
     return _Article.ArticleHeader;
   }
 });
-Object.defineProperty(exports, "ArticlePadding", {
-  enumerable: true,
-  get: function () {
-    return _Article.ArticlePadding;
-  }
-});
 Object.defineProperty(exports, "ArticleParagraph", {
   enumerable: true,
   get: function () {

package/lib/CampaignBlock/CampaignBlock.js

@@ -22,7 +22,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const Container = (0, _jsx2.styled)("div", {
   base: {
+    width: "100%",
     display: "flex",
+    gap: "medium",
     flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
@@ -41,6 +43,17 @@ const LinkText = (0, _jsx2.styled)(_primitives.Text, {
     display: "flex",
     gap: "xxsmall",
     textDecoration: "underline",
+    _hover: {
+      textDecoration: "none"
+    },
+    paddingBlock: "xsmall",
+    fontWeight: "bold"
+  }
+});
+const LinkHeader = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    display: "flex",
+    textDecoration: "underline",
     _hover: {
       textDecoration: "none"
     }
@@ -52,8 +65,11 @@ const StyledImg = (0, _jsx2.styled)("img", {
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    desktop: {
+    mobileWide: {
       height: "340px"
+    },
+    tabletWide: {
+      width: "auto"
     }
   }
 });
@@ -63,12 +79,24 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall",
+    gap: "medium",
     alignItems: "flex-start",
+    justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium"
   }
 });
+const StyledText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    tabletWide: {
+      display: "block",
+      overflow: "hidden",
+      position: "relative",
+      lineClamp: 4,
+      boxOrient: "vertical"
+    }
+  }
+});
 const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
   base: {
     color: "inherit"
@@ -103,7 +131,7 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkText : _primitives.Text;
+  const HeaderComponent = url?.url ? LinkHeader : _primitives.Text;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     className: className,
     "data-embed-type": "campaign-block",
@@ -119,8 +147,8 @@ const CampaignBlock = _ref2 => {
             children: (0, _htmlReactParser.default)(title)
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        textStyle: "body.large",
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
+        textStyle: "body.xlarge",
         children: (0, _htmlReactParser.default)(description)
       }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
         url: url.url,

package/lib/index.d.ts

@@ -7,7 +7,7 @@
  */
 export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
-export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle, ArticlePadding, } from "./Article";
+export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle, } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";

package/lib/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "Article", {
     return _Article.Article;
   }
 });
-Object.defineProperty(exports, "ArticleActionWrapper", {
-  enumerable: true,
-  get: function () {
-    return _Article.ArticleActionWrapper;
-  }
-});
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
   get: function () {
@@ -57,12 +51,6 @@ Object.defineProperty(exports, "ArticleHeader", {
     return _Article.ArticleHeader;
   }
 });
-Object.defineProperty(exports, "ArticlePadding", {
-  enumerable: true,
-  get: function () {
-    return _Article.ArticlePadding;
-  }
-});
 Object.defineProperty(exports, "ArticleParagraph", {
   enumerable: true,
   get: function () {

package/lib/locale/messages-en.js

@@ -1075,9 +1075,9 @@ const messages = {
         },
         fetchMore: "Fetch more answers",
         deleted: "This post has been deleted by the author.",
-        upvote: "Upvote",
+        upvote: "Like",
         numberOfUpvotes: "{{ count }} people have upvoted this.",
-        removeUpvote: "Remove upvote",
+        removeUpvote: "Stop liking",
         reply: "Write a reply to {{ name }}"
       },
       flag: {